{extend name="base"/}
{block name="resources"}
<style type="text/css">
    .ns-order-details{width: 1200px;margin: 35px auto;}
    .layui-layer-page .layui-layer-content{overflow: auto!important;}
    .ns-order-details .product-info{display: flex;align-items: center;}
    .ns-order-details .product-info .info-img{display: flex;justify-content: center;align-items: center;margin-right: 10px;width: 65px;height: 65px;}
    .ns-order-details .product-info .info-img img{max-width: 100%;max-height: 100%;}
    .ns-order-details .product-info span{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .ns-order-details .order-info{display: flex;}
    .ns-order-details .order-info > span{margin-right: 40px; color:#666;}
    .ns-order-details .order-operation{display: flex;align-items: flex-end;flex-direction: column;margin-top: 50px;padding: 15px 30px;line-height: 1.8;background-color: #f7f7f7;}
    .ns-order-details .order-operation span span{display: inline-block;width: 120px;text-align: right;}
    .ns-order-details .order-operation span:nth-of-type(2){font-weight: bold;}
    .ns-order-details .order-operation span:nth-of-type(2) span{font-weight: 400;font-size: 20px;}
    .ns-order-details .order-operation button{margin-top: 8px;}
    .wechat{display: flex;flex-direction: column;align-items: center;}
    .wechat .wechat-img{display: flex;justify-content: space-between;align-items: center;width: 125px;height: 125px;border: 1px solid #e5e5e5;}
    .wechat .wechat-img img{max-height: 100%;max-width: 100%;}
    .wechat .wechat-desc{height: 20px;line-height: 20px;margin-top: 11px;color: #646566;}
    .wechat .wechat-btns{display: flex;justify-content: center;margin-top: 20px;}
    .wechat .wechat-btns span{margin: 0 6px;width: 106px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #e5e5e5;cursor: pointer;color: #333;}
    .wechat .wechat-btns .wechat-finish{color: #fff;}
</style>
{/block}
{block name="main"}
<div class="ns-order-details">
    <div class="order-info">
        <span>订购单号：{$detail.out_trade_no}</span>
        <span>创建时间：<span class="time"></span></span>
        <span>订单类型：{$detail.order_type_name}</span>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="300">
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <!-- 套餐 -->
        {if $detail.group_id > 0 &&  $detail.group_num > 0}
        <thead>
        <tr>
            <th>套餐信息</th>
            <th>单价</th>
            <th>时长</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <div class="product-info">
                    <div class="info-img">
                        <img src="{:img($detail.group_image)}" onerror=src="HOME_IMG/shop.png" alt="">
                    </div>
                    <span>{$detail.group_name}</span>
                </div>
            </td>
            <td>{$detail.group_period_price}</td>
            <td>{$detail.group_num}{if $detail.group_period_unit == 'week'} 周 {elseif $detail.group_period_unit == 'month'} 月 {elseif $detail.group_period_unit == 'year'} 年 {/if}</td>
            <td>{$detail.order_money}</td>
        </tr>
        </tbody>
        {/if}

        <!-- 短信 -->
        {if $detail.sms_package_id > 0 &&  $detail.sms_num > 0}
        <thead>
        <tr>
            <th>短信信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <div class="product-info">
                    <div class="info-img">
                        <img src="{:img($detail.sms_package_image)}" onerror=src="HOME_IMG/sms.png" alt="">
                    </div>
                    <span>{$detail.sms_package_name}</span>
                </div>
            </td>
            <td>{$detail.sms_package_price}</td>
            <td>{$detail.sms_package_num}</td>
            <td>{$detail.sms_money}</td>
        </tr>
        {/if}
        </tbody>
    </table>
    <div class="order-operation">
        <span>合计：<span class="price">￥{$detail.order_money}</span></span>
        <span>应付款：<span class="price ns-red-color">￥{$detail.order_money}</span></span>
        <button class="layui-btn ns-bg-color buy-immediately">立即支付</button>
    </div>
</div>

{/block}
{block name="script"}
<script type="text/html" id="payment">
    <div class="layui-form">
        <input type="hidden" name="out_trade_no" value="{$detail.out_trade_no}">

        <div class="layui-form-item">
            <label class="layui-form-label mid">套餐名称：</label>
            <div class="layui-input-inline">
                {$detail.order_name}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label mid">支付金额：</label>
            <div class="layui-input-inline">
                {$detail.order_money}
            </div>
        </div>

        <input type="hidden" name="pay_model" value="2"/>
        {notempty name="pay_type"}
        <div class="layui-form-item">
            <label class="layui-form-label mid">支付类型：</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <input type="radio" name="pay_model" value="1" lay-filter="type_payment" checked title="线上支付"/>
                    <input type="radio" name="pay_model" value="2" lay-filter="type_payment" title="线下支付"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item mode-payment">
            <label class="layui-form-label mid">支付方式：</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    {foreach $pay_type  as $key => $type}
                    <input type="radio" name="pay_type" value="{$type.pay_type}" {if $key == 0} checked {/if} lay-filter="level" title="{$type.pay_type_name}"/>
                    {/foreach}
                </div>
            </div>
        </div>
        {/notempty}

        <div class="layui-form-item  {notempty name='pay_type'}layui-hide{/notempty} offline-payment">
            <label class="layui-form-label mid">收款账户信息：</label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                    </colgroup>
                    <tbody>
                    <tr>
                        <td align="right">银行开户名：</td>
                        <td>{$receivable_config.bank_account_name}</td>
                        <td align="right">银行账户：</td>
                        <td>{$receivable_config.bank_account_no}</td>
                    </tr>
                    <tr>
                        <td align="right">开户名称：</td>
                        <td>{$receivable_config.bank_name}</td>
                        <td align="right">开户所在地：</td>
                        <td>{$receivable_config.bank_address}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-form-item {notempty name='pay_type'}layui-hide{/notempty} offline-payment">
            <label class="layui-form-label img-upload-lable mid"><span class="required">*</span>付款凭证：</label>
            <div class="layui-input-inline img-upload">
                <div class="upload-img-block icon">
                    <div class="upload-img-box">
                        <div class="ns-upload-default" id="voucher">
                            <div class="upload">
                                <img src="HOME_IMG/upload_img.png" />
                                <p>点击上传</p>
                            </div>
                        </div>
                        <div class="operation"  >
                            <div >
                                <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                            </div>
                            <div class="replace_img js-replace">点击替换</div>
                        </div>
                        <input type="hidden" name="paying_money_certificate" lay-verify=""/>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item {notempty name='pay_type'}layui-hide{/notempty} offline-payment">
            <label class="layui-form-label mid"><span class="required">*</span>付款凭证说明：</label>
            <div class="layui-input-inline">
                <textarea name="paying_money_certificate_explain" class="layui-textarea ns-len-mid" lay-verify=""  placeholder="请输入付款凭证说明"></textarea>
            </div>
        </div>

        <!-- 表单操作 -->
        <div class="ns-form-row mid">
            <button class="layui-btn ns-bg-color" lay-submit lay-filter="submit">提交</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</script>

<script type="text/html" id="wechat">
    <div class="wechat">
        <div class="wechat-img">
            <img src="{{d.img}}" alt="">
        </div>
        <span class="wechat-desc">使用微信扫码支付</span>
        <div class="wechat-btns">
            <span class="wechat-finish ns-border-color ns-bg-color">支付完成</span>
            <span class="wechat-payagain">重新支付</span>
        </div>
    </div>
</script>

<script>
    var form,laytpl,createTime = "{$detail.create_time}",
        paymentMethodIndex,alipayIndex,wethatIndex,paymentIndex = 1,
        repeat_flag = false;
    $(".order-info .time").text(ns.time_to_date(createTime));

    /* 立即购买 */
    layui.use(['form', 'laytpl'], function() {
        form = layui.form;
        laytpl = layui.laytpl;
        var upload;

        $("body").on("click",".buy-immediately",function(){
            modePayment();
        });

        function modePayment(){
            laytpl($("#payment").html()).render({}, function(html) {
                paymentMethodIndex = layer.open({
                    type: 1,
                    title: '选择付款方式',
                    area: ['750px','650px'],
                    content: html,
                    success(){
                        if (!parseInt("{$pay_type_count}")){
                            paymentIndex = 2;
                            $(".offline-payment [lay-verify]").attr("lay-verify","required");
                        }
                    }
                });
            });
            form.render();

            form.on('radio(type_payment)', function(data){
                paymentIndex = data.value;
                //1 是线上支付 2是线下支付
                if (data.value == 1){
                    $(".mode-payment").removeClass("layui-hide");
                    $(".offline-payment").addClass("layui-hide");
                    $(".offline-payment [lay-verify]").attr("lay-verify","");
                }else{
                    $(".mode-payment").addClass("layui-hide");
                    $(".offline-payment").removeClass("layui-hide");
                    $(".offline-payment [lay-verify]").attr("lay-verify","required");
                }
            });

            //上传支付凭证
            upload = new Upload({
                elem: '#voucher',
                post:"home"
            });
        }

        form.on('submit(submit)', function(data){
            // 删除图片
            if(!data.field.paying_money_certificate) upload.delete();

            var pay_type = $('input[name=pay_type]:checked').val();

            if (repeat_flag) return false;
            repeat_flag = true;
            if (paymentIndex == 1){
                $.ajax({
                    type: 'POST',
                    url: ns.url("home/ordercreate/pay"),
                    data: {out_trade_no: "{$detail.out_trade_no}", pay_type:pay_type},
                    dataType: 'JSON',
                    success: function(res) {
                        layer.msg(res.message);
                        repeat_flag = false;
                        if (res.code == 0) {
                            if(res.data.type == "url"){
                                payAlipay();
                                window.open(res.data.data);
                            }else if(res.data.type == "qrcode"){
                                wechatPay(res.data.qrcode);
                            }
                        } else {
                            location.reload();
                        }
                    }
                });
            }else{
                $.ajax({
                    type: 'POST',
                    url: ns.url("home/ordercreate/confirm"),
                    data: data.field,
                    dataType: 'JSON',
                    success: function(res) {
                        layer.msg(res.message);

                        repeat_flag = false;

                        if (res.code == 0) {
                            location.href= ns.url("home/account/order");
                        } else {
                            location.reload();
                        }
                    }
                });
            }
        });


        /* 支付宝支付 */
        function payAlipay(){
            layer.close(paymentMethodIndex);

            alipayIndex = layer.open({
                type: 0,
                title: '支付提醒',
                btn: ['支付完成 ', '重新支付'],
                content: "确认支付完成之后点击'支付完成'按钮。",
                yes: function () {
                    $.ajax({
                        type: 'POST',
                        url: ns.url("home/ordercreate/verifyIsPay"),
                        data: {out_trade_no: "{$detail.out_trade_no}"},
                        dataType: 'JSON',
                        success: function(res) {
                            if (res.code >= 0){
                                layer.close(alipayIndex);
                                location.href= ns.url("home/account/order");
                            } else{
                                layer.msg(res.message);
                            }
                        }
                    });
                },
                btn2: function () {
                    layer.close(alipayIndex);
                    modePayment();
                }
            });
        }

        /* 微信支付 */
        function wechatPay(imgUrl){
            layer.close(paymentMethodIndex);
            imgUrl = ns.url("home/ordercreate/qrcode",{param:imgUrl});

            laytpl($("#wechat").html()).render({img: imgUrl}, function(html) {
                wethatIndex = layer.open({
                    type: 1,
                    title: '微信支付',
                    area: ['550px', '300px'],
                    content: html,
                });
            });
        }

        //微信 - 重新支付
        $("body").on("click",".wechat .wechat-payagain",function(){
            layer.close(wethatIndex);
            modePayment();
        });

        //微信 - 支付完成
        $("body").on("click",".wechat .wechat-finish",function(){
            $.ajax({
                type: 'POST',
                url: ns.url("home/ordercreate/verifyIsPay"),
                data: {out_trade_no: "{$detail.out_trade_no}"},
                dataType: 'JSON',
                success: function(res) {
                    if (res.code >= 0){
                        layer.close(wethatIndex);
                        location.href= ns.url("home/account/order");
                    } else{
                        layer.msg(res.message);
                    }
                }
            });
        });

    });

    function back() {
        layer.closeAll();
    }
</script>
{/block}